import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
// require支持
import requireTransform from 'vite-plugin-require-transform';
// 导如所有svg图标
import { svgBuilder } from './src/plugins/svgBuilder';

import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// jsx语法支持
import vueJsx from '@vitejs/plugin-vue-jsx';

const pathSrc = path.resolve(__dirname, 'src');

export default defineConfig({
  base: '/',
  plugins: [
    vue(),
    vueJsx(),
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ]
    }),
    eslintPlugin({
      include: [
        'src/**/*.js',
        'src/**/*.vue',
        'src/*.js',
        'src/*.vue',
        'src/**/*.jsx',
        'src/*.jsx'
      ]
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')], // SVG 存放路径
      symbolId: 'icon-[name]'
    }),
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
    svgBuilder('src/icons/')
  ],
  server: {
    host: '0.0.0.0',
    hmr: true,
    port: 18082,
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '/api')
      }
    }
  },
  resolve: {
    // 配置路径别名
    alias: {
      '~/': `${pathSrc}/`,
      '@': `${pathSrc}/`
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *; `
      }
    }
  }
});
